<template>
  <div class="img-pick" >
    <div class="img-pick-inner" @click="onPick">
      <img v-if="currValue" :src="currValue" class="img-pick-image"/>

      <span class="img-pick-tip" v-else>请选择</span>
    </div>
    <div v-if="currValue" class="img-pick-delete" @click="clear">
      <i class="el-icon-delete"></i>
    </div>
    <simple-dialog2 v-bind.sync="dialog" theme="dark" @on-ok="onDialogOk"/>
  </div>
</template>

<script>
import dialogMixin from "@/components/common/dialog/dialog-mixin";
import tmImgPanel from './tm-img-panel'

export default {
  name: 'tm-img-pick',
  cnName: '图片显示选择',
  mixins: [dialogMixin],
  props: {
    value: String,
    deleteAble: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      currValue: this.value
    }
  },
  methods: {
    onPick(evt) {
      const origin = {
        x: evt.pageX,
        y: evt.pageY
      }
      this.setDialog({
        title: '选择图片',
        origin: origin,
        comp: tmImgPanel
      })
    },
    onDialogOk(val) {
      this.dialog.visible = false
      this.currValue = val
    },
    clear() {
      console.info('>>>>')
      this.currValue = ''
    }
  },
  watch: {
    value(nval) {
      this.currValue = nval
    },
    currValue(nval) {
      this.$emit('input', nval)
    }
  }
}
</script>

<style lang="less" scoped>
.img-pick {
  width: 100%;
  height: 120px;
  cursor: pointer;
  color: rgba(255, 255, 255, .6);
  position: relative;

  &-inner {
    position: relative;
    width: 100%;
    height: 100%;
    border: 1px dashed;
  }

  &-delete {
    position: absolute;
    top: -5px;
    right: 5px;
    z-index: 2;
  }

  &-image {
    max-width: 100%;
    max-height: 100%;
  }

  &-tip {
    display: block;
    margin: 10px auto;
    text-align: center;
  }
}
</style>
